<template>
  <HeadContainer :title="$t('title.popularCreator')" :divider="false" full-height @back="toSearch()">
    <CreatorRow
      :items="dataList"
      :loading="loading"
      :no-more="noMore"
      @intersect="nextPage"
      @click:item="onCreatorClicked"
    ></CreatorRow>
  </HeadContainer>
  <Jsonld :schema="schema"></Jsonld>
</template>
<script setup>
import { shallowRef, watchEffect } from 'vue'
import { useNavStore } from '@/store/nav'
import { $t } from '@/i18n'
import Jsonld from '@/components/common/Jsonld.vue'
import HeadContainer from '@/components/layout/HeadContainer.vue'
import CreatorRow from '@/components/search/row/CreatorRow.vue'
import { useInfinite } from '@/compositions/request/infinite'
import API from '@/http'

const emits = defineEmits(['creator'])

const creatorLimit = 28
const { dataList, loading, noMore, nextPage } = useInfinite({
  request: API.Media.creators,
  params: {},
  limit: creatorLimit,
})

const onCreatorClicked = (aff, username) => {
  emits('creator', aff, username)
}

const { toSearch } = useNavStore()

// Jsonld 佈置
const schema = shallowRef(null)
watchEffect(() => {
  schema.value = {
    '@context': 'https://schema.org',
    '@type': 'ItemList',
    name: $t('title.popularCreator'),
    itemListOrder: 'http://schema.org/ItemListOrderAscending',
    itemListElement: dataList.value.map((v, i) => ({
      '@type': 'Person',
      position: i + 1,
      name: v.nickname,
      alternateName: v.username,
      identifier: `${v.aff}`,
      url: v.share_url,
      image: import.meta.env.VITE_APP_URL + import.meta.env.VITE_APP_OG_IMAGE,
    })),
  }
})
</script>
